<template>
	<view :class="[primarySize()]">
		<view class="post_list">
			<view class="post_item" @click="jobDetail(item.id)" v-for="(item,index) in jobs" :key="index">
				<view class="flex-box">
					<!-- <image class="img_logo" :src="cdnurl(item.enterpriseinfo.logo)" mode="aspectFill"></image> -->
					<view class="flex-grow-1">
						<view class="recom_text">
							<view class="recom_tit m-ellipsis">{{item.job_name}}
							</view>
							<image src="@/static/public/tip1.png" mode="aspectFit" v-if="item.in_hurry"></image>
							<image src="@/static/public/tip2.png" mode="aspectFit" v-if="item.red_packet"></image>
							<image src="@/static/public/tip3.png" mode="aspectFit" v-if="item.direct"></image>
							<image src="@/static/public/tip4.png" mode="aspectFit" v-if="item.shop"></image>
							<image src="@/static/public/tip5.png" class="top" v-if="item.top" mode="aspectFit"></image>
						</view>
						<view class="recom_price">{{item.salary_text}}</view>
					</view>
					<view class="order_info" v-if="item.red_packet" @click.stop="bindRedPacketTap(index)">
						<view class="colf">补贴</view>
						<view class="p1">
							<view class="colff7 bgf">返{{item.red_packet}}元</view>
						</view>
					</view>
				</view>
				<!-- <view class="mt15 col6 fs24">{{item.enterpriseinfo.company_name||item.enterpriseinfo.full_name}}</view> -->
				<view class="clearfix pt10">
					<!-- <view class="tips_item">{{item.district.name}}</view> -->
					<view class="tips_item">{{item.education_level.name}}</view>
					<view class="tips_item">{{item.work_experience.name}}</view>
					<view class="tips_item" v-for="(benefit,benefitIndex) in item.benefits">{{benefit.name}}</view>
				</view>
				<view class="mt30 flex-box">
					<image :src="item.enterpriseinfo?cdnurl(item.enterpriseinfo.logo):''" mode="aspectFill" class="cover"></image>
					<view class="flex-grow-1 plr10 m-ellipsis fs22 col6">{{item.enterpriseinfo?item.enterpriseinfo.company_name:''}}</view>
					<view class="fs22 cola5" v-if="item.locations && item.locations.length>0"><text class="pr20" v-if="item.locations[0].distance">{{item.locations[0].distance}}</text>
						{{item.locations[0].city.name+" "+item.locations[0].district.name}}
					</view>
					<view class="fs22 cola5" v-else><text class="pr20" v-if="item.distance">{{item.distance}}</text>
						{{item.city.name+" "+item.district.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name: "job-list",
		props: {
			jobs: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				
			};
		},
		created() {
			;
		},
		methods: {
			jobDetail(id) {
				uni.navigateTo({
					url: '/pages/user/post_info?id=' + id
				})
			},
			bindRedPacketTap(e) {
				let index = e;
				let job = this.jobs[index];
				if (job.red_packet_instruction) {
					uni.showModal({
						title: '补贴说明',
						content: job.red_packet_instruction,
						showCancel: false
					});
				} else {
					uni.showToast({
						title: '无补贴说明',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.post {


		&_item {
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
			border-radius: 18rpx;
			margin-top: 30rpx;
			padding: 30rpx;
			position: relative;

			.maxw60 {
				max-width: 60%;
			}

			.urgent {
				width: 74rpx;
				height: 37rpx;
				line-height: 33rpx;
				text-align: center;
				font-size: 24rpx;
				color: var(--primary);
				border-radius: 6rpx;
				border: 2rpx solid var(--primary);
			}

			.tips_item {
				height: 32rpx;
				background: #ECEFF5;
				border-radius: 4rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #A5A5A5;
				line-height: 32rpx;
				display: inline-block;
				vertical-align: top;
				margin-right: 10rpx;
				margin-top: 10rpx;
				padding: 0 8rpx;
			}

			.cover {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}
	}

	.img_logo {
		margin: 0 20rpx 0 0;
		display: block;
		width: 110rpx;
		height: 110rpx;
	}

	.recom_text .top {
		position: absolute;
		top: 0;
		right: 0;
		width: 74rpx;
		height: 74rpx;
	}

	.recom_item:nth-last-child(1) {
		margin-bottom: 0;
	}

	.recom_tit {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		display: inline-block;
		vertical-align: middle;
		max-width: 70%;
	}

	.recom_price {
		font-size: 28rpx;
		color: var(--primary);
		font-weight: bold;
		padding-top: 20rpx;
	}

	.recom_type {
		padding-top: 20rpx;
	}

	.recom_type_item {
		font-size: 24rpx;
		color: #999;
		background-color: #F7F7F7;
		float: left;
		line-height: 39rpx;
		padding: 0 15rpx;
		border-radius: 8rpx;
		margin-right: 17rpx;
		margin-bottom: 17rpx;
	}

	.recom_info {
		padding: 0 30rpx 15rpx;
	}

	.recom_business {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		border-top: 1rpx solid #F6F6F6
	}

	.recom_business image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 7rpx;
		display: block;
	}

	.recom_business .col0 {
		color: #000;
		flex: 1;
		overflow: hidden
	}

	.recom_business .col9 {
		color: #999
	}

	.recom_text image {
		width: 32rpx;
		height: 32rpx;
		display: inline-block;
		vertical-align: middle;
		margin-left: 12rpx;
	}
		.order_info {
			text-align: center;
			line-height: 36rpx;
			background: var(--primary);
			font-size: 22rpx;
			border-radius: 8rpx;
			overflow: hidden
		}

	.colff7 {
		color: var(--primary);
	}

	.colf {
		color: #fff
	}

	.bgf {
		background-color: #fff;
		border-radius: 0 0 8rpx 8rpx
	}

	.order_info>view {
		width: 121rpx;
	}

	.p1 {
		padding: 1rpx;
		box-sizing: border-box
	}
</style>